// import React from 'react'
import{ useEffect, useState } from 'react';
import { Space, Table } from 'antd';
import type { TableProps } from 'antd';
import request from '../../api/request'
import type { FormProps } from 'antd';
import { Form, Input } from 'antd';
import { Button, Modal } from 'antd';
import { useNavigate } from 'react-router-dom';
const My = () => {
  const navtion=useNavigate()
  interface DataType {
    key: string;
    name: string;
    age: number;
    content: string;
    tags: string[];
    title: string,
    updatedAt: string,
  }

  // 搜索
  type FieldType = {
    title: string;
    content: string;

  };
  // 对话框modeol
  const [isModalOpen, setIsModalOpen] = useState(false);
  type FieldType1 = {
    title: string;
    content: string;

  };
  const [form] = Form.useForm();

  const [added, setAdded] = useState(false)
  const [data, setData] = useState('')
  const [total, setTotal] = useState(1)
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [title, setTitle] = useState<string>()

  
  const getList = async (title,) => {
    const res = await request.get('article/list', {
      params: {
        page,
        pageSize,
        keyword: title,

      }
    })
    // console.log(res);
    setData(res.data.rows)
    setTotal(res.data.count)
  }

  useEffect(() => {
    getList()
  }, [page, pageSize])
  const columns: TableProps<DataType>['columns'] = [
    {
      title: 'content',
      dataIndex: 'content',
      key: 'content',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'title',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: 'updatedAt',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
    },

    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">

          <a>Delete</a>
          <button onClick={() => editl(record)}>编辑</button>
          <button onClick={() => editll(record.id)}>详情</button>
        </Space>
      ),
    },
  ];

  const [editId, setEditId] = useState('')
  // 编辑
  const editl = (record:any) => {
    console.log(record);
    setIsModalOpen(true)
    setEditId(record.id)
    form.setFieldsValue(record)
    setAdded(false)
  }

  // 详情
  const  editll =(id:any)=>{
    navtion(`/editll/${id}`)
  }



  // 分页
  const onchange = (page, pageSize) => {
    setPage(page)
    setPageSize(pageSize)

  }
  // 搜索
  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    console.log('Success:', values);
    const { title } = values
    getList(title)
  };

  // 对话框module
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // 新增按钮
  const addList = () => {
    setIsModalOpen(true)
    form.resetFields();
    setAdded(true)
  }
  const addonFinish: FormProps<FieldType1>['onFinish'] = async (values) => {
    console.log('Success:', values);
     if (added) {
      try {
        const res = await request.post('/article', { ...values, authorId: 47529555 })
        console.log(res);
        setIsModalOpen(false)
        // getList()

      } catch (error) {

      }
    }
    else {
      const res1 = await request.put(`article/${editId}`, values)
      console.log(res1);

    
      // getList()
      setIsModalOpen(false)

    }
  };
  return (
    <div>
      <div>
        {/* 搜索 */}
        <Form
          name="basic"
          layout='inline'
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}

          autoComplete="off"
        >
          <Form.Item<FieldType>
            label="title"
            name="title"
          // rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
      <div>
        <Button onClick={() => addList()}>新增</Button>
      </div>
      <Table<DataType> columns={columns} dataSource={data}
        pagination={{
          total: total,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `Total ${total} items`,
          onChange: onchange
        }}
          rowKey='id'
      />;
      <div>
        <Modal
          title={added?'新增':'编辑'}
          closable={{ 'aria-label': 'Custom Close Button' }}
          open={isModalOpen}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <Form
            name="basic"
            form={form}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            style={{ maxWidth: 600 }}
            initialValues={{ remember: true }}
            onFinish={addonFinish}

            autoComplete="off"
          >
            <Form.Item<FieldType1>
              label="title"
              name="title"
            // rules={[{ required: true, message: 'Please input your username!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item<FieldType1>
              label="content"
              name="content"
            // rules={[{ required: true, message: 'Please input your username!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item label={null}>
              <Button type="primary" htmlType="submit">
                Submit
              </Button>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    </div>
  )
}

export default My
